<template>
  <div>
    <a-modal
      title="晨检详情"
      :width="450"
      :visible="visible"
      :confirmLoading="confirmLoading"
      @ok="handleSubmit"
      @cancel="handleCancel"
    >
      <a-spin :spinning="confirmLoading">
        <a-form
          layout="inline"
          :form="form"
        >
          <a-form-item
            style="display: none;"
          >
            <a-input v-decorator="['id']" />
          </a-form-item>
          <a-form-item
            style="display: none;"
          >
            <a-input v-decorator="['childrenId']" />
          </a-form-item>
          <div class="content">
            <a-row>
              <a-col>
                <a-form-item label="日期：">
                  <div class="mg-b">{{ details.recordTime }}</div>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col>
                <a-form-item label="姓名：">
                  <div class="mg-b">{{ details.childrenName }}</div>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col>
                <a-form-item label="班级：">
                  <div class="mg-b">{{ details.className }}</div>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col>
                <a-form-item label="体温：">
                  <div>
                    <a-input-number
                      v-decorator="['bodyTemperature']"
                      :min="1"
                      :step="0.1"
                    /><span style="margin-left: 10px;">度</span>
                  </div>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col>
                <a-form-item label="咽喉：">
                  <a-radio-group
                    v-decorator="['throatType']"
                    :options="options"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </div>
        </a-form>
      </a-spin>
    </a-modal>
  </div>
</template>
  
  <script>
  import { mCheckDetails,mCheckEdit,mCheckAdd } from '@/api/modular/garden/mCheck'
  export default {
     data(){
      return {
          visible:false,
          details:{},
          options : [
        {
          label: '正常',
          value: 1,
        },
        {
          label: '轻微',
          value: 2,
        },
        {
          label: '严重',
          value: 3,
        },
       ],
       confirmLoading: false,
       form: this.$form.createForm(this)
      }
     },
     methods:{
      edit(record){
          this.details = record
          this.visible = true
          this.$nextTick(() => {
          
          this.form.setFieldsValue(
            {
              id: record.id,
              childrenId: record.childrenId,
            }
          )
        })
      },
      handleCancel () {
          this.form.resetFields()
          this.visible = false
        },
      handleSubmit () {
        const { form: { validateFields } } = this
        this.confirmLoading = true;
        validateFields((errors, values) => {
          if (!errors) {
            if(values.id!=null){
              mCheckEdit(values).then((res) => {
              if (res.success) {
                this.$message.success('编辑成功')
                this.visible = false
                this.confirmLoading = false
                this.$emit('ok', values)
                this.form.resetFields()
              } else {
                this.$message.error('编辑失败：' + res.message)
              }
            }).finally((res) => {
              this.confirmLoading = false
            })
            }else{
              mCheckAdd(values).then((res) => {
              if (res.success) {
                this.$message.success('添加成功')
                this.visible = false
                this.confirmLoading = false
                this.$emit('ok', values)
                this.form.resetFields()
              } else {
                this.$message.error('添加失败：' + res.message)
              }
            }).finally((res) => {
              this.confirmLoading = false
            })
            }
          } else {
            this.confirmLoading = false
          }
        })
      }
     }
  }
  </script>
  
  <style scoped>
  .content{
      font-size: 15px;
  }
  .mg-b{
      margin-bottom: 10px;
  }
  .mg-l{
      margin-left: 30px;
  }
  
  .img-item{
    width: 100px;
    margin-left: 5px;
  }
  .imgBox{
    padding-left: 75px;
  }
  </style>